@model DisplayDeploymentPlanViewModel
@inject IDeploymentManager DeploymentTargetManager
@using OrchardCore.Deployment.Services
@using Microsoft.AspNetCore.Routing

<h1>@RenderTitleSegments(T["Deployment Plan"])</h1>

<nav class="admin-toolbar">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <div class="btn-group">
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalTargets">
                    @T["Execute"]
                </button>
            </div>
        </li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalSteps">
                @T["Add Step"]
            </button>
        </li>
    </ul>
</nav>

<form asp-action="DeploymentPlan">
    @if (Model.Items.Any())
    {
        <ul class="list-group">
            @foreach (var item in Model.Items)
            {
                item.DeploymentPlanId = Model.DeploymentPlan.Id;

                <li class="list-group-item">
                    @await DisplayAsync(item)
                </li>
            }
        </ul>
    }
    else
    {
        <div class="alert alert-info" role="alert">
            @T["<strong>Nothing here!</strong> There are no steps on this plan for the moment."]
        </div>
    }
</form>

<!-- Modal -->
<div class="modal fade" id="modalSteps" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Available Steps"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input class="form-control" id="search-box" type="search" placeholder="@T["Filter"]" aria-label="@T["Filter"]" autofocus>
                </div>
                <div id="cards" class="row">
                    @foreach (var thumbnail in Model.Thumbnails)
                    {
                        thumbnail.Value.DeploymentPlan = Model.DeploymentPlan;
                        thumbnail.Value.Type = thumbnail.Key;

                        <div class="col-sm-12 col-md-6 col-lg-4 d-flex align-items-stretch card-item">
                            @await DisplayAsync(thumbnail.Value)
                        </div>
                    }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTargets" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Available Targets"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    @foreach (var target in await DeploymentTargetManager.GetDeploymentTargetsAsync())
                    {
                        var routeWithId = new RouteValueDictionary(target.Route);
                        routeWithId["id"] = Model.DeploymentPlan.Id;
                        <div class="col-sm-12 col-md-6 col-lg-4 d-flex align-items-stretch card-item">
                            <div class="card w-100 mb-3">
                                <div class="card-body">
                                    <h4 class="card-title">@target.Name</h4>
                                    <p>@target.Description</p>
                                </div>
                                <div class="card-footer text-muted text-xs-right">
                                    <a class="btn btn-primary btn-sm" href="@Url.RouteUrl(routeWithId)" itemprop="UnsafeUrl">@T["Select"]</a>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>
<script at="Foot" type="text/javascript">
    function replaceDiacritics(str) {
        return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    }

    $(function () {
        var searchBox = $('#search-box');

        // On each keypress filter the list of cards
        searchBox.keyup(function (e) {
            var search = replaceDiacritics($(this).val().toLowerCase());
            if (search == '') {
                searchBox.val('');
                $('.card-item').attr('style', 'display:flex !important');
            }
            else {
                $('.card-item').each(function () {
                    var filter = replaceDiacritics($(this).children().children().first().html().toLowerCase());
                    var found = filter.indexOf(search) > -1;
                    if (found) {
                        $(this).attr('style', 'display:flex !important');
                    }
                    else {
                        $(this).attr('style', 'display:none !important');
                    }
                });
            }
        });
    })
</script>
